<template>

	<u-popup v-model="voteShow" mode="center" height="300rpx" width="500rpx" border-radius='10'
		:mask-close-able='false'>
		<view class="vote_box">
			<view style="text-align: center;">可投票数量：{{dataForm.useSendNum}}</view>
			<u-number-box v-model="voteNum" :min="1" :max="dataForm.useSendNum"></u-number-box>
			<view class="u-flex">
				<view class="btn_close" @click="onViteClose">
					取消</view>
				<view class="btn_success" @click="onSumbitVote">
					确认投票</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {

		props: {
			dataForm: {
				type: Object,
				default: () => {
					return {}
				}
			},
			value: {
				type: [Number, String],
				default: 1
			}
		},

		data() {
			return {
				voteShow: false,
			}
		},
		computed: {
			voteNum: {
				get: function() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			}
		},

		methods: {
			onVoteShow() {
				this.voteShow = true
			},
			onSumbitVote() {
				this.voteShow = false
				this.$emit('onSumbitVote')
			},
			onViteClose() {
				this.voteShow = false
			},
		}

	}
</script>

<style lang="scss" scoped>
	.btn_success {
		background-color: #00A6F8;
		color: #FFFFFF;
		border-radius: 8rpx;
		margin-left: 20rpx;
		width: 150rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 23rpx;
	}

	.btn_close {
		border: 1rpx solid #f5f5f5;
		color: #999;
		border-radius: 8rpx;
		width: 150rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		box-sizing: border-box;
		font-size: 23rpx;
	}

	.vote_box {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx;
		height: 100%;
	}
</style>
